<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button type="primary" @click="toNewOrder()">新单(N)</el-button>
        <el-button @click="queryClick">查询</el-button>
        <!-- :disabled="!buttonsPermissions.DaoChu"
          :class="!buttonsPermissions.DaoChu ? 'disabled_button' : ''" -->
        <el-button @click="exportExcel()">导出</el-button>
        <!-- :disabled="!buttonsPermissions.DaYin"
          :class="!buttonsPermissions.DaYin ? 'disabled_button' : ''" -->
        <!-- <el-button @click="handleShortcutKeyPrint">打印(P)</el-button> -->
        <!-- :disabled="orderStatus == 66"
        :class="orderStatus == 66 ? 'disabled_button' : ''" -->
        <el-tooltip
          effect="dark"
          content="快捷键 Alt + P"
          :enterable="false"
          placement="bottom-start"
          :hide-after="1000"
        >
          <el-button
            v-if="buttonsPermissions.DaYin"
            @click="handleShortcutKeyPrint"
            >打印(P)</el-button
          >
          <el-button v-else class="disabled_button" disabled>打印</el-button>
        </el-tooltip>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_table">
        <div class="div_screen">
          <div class="screen_left">
            <div class="right_top">
              <div class="item_title">发票日期</div>
              <el-select v-model="monthValue" @change="changeDate">
                <el-option v-for="item in monthOptions" :key="item" :label="item" :value="item"></el-option>
              </el-select>
              <el-date-picker
                v-model="nowDate"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="onClickPicker"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
            <!-- 发票类型 -->
            <div class="custom_item">
              <div class="item_title">发票类型</div>
              <div class="custom_select_head">
                <el-select v-model="queryData.invoiceType" style="width: 100%" filterable ref="fplxSelect" placeholder="请选择">
                  <el-option
                    v-for="item in djztOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <!-- 发票号码 -->
            <div class="custom_item">
              <div class="item_title">发票号码</div>
              <el-tooltip
                effect="dark"
                :content="queryData.invoiceNumber"
                :enterable="false"
                placement="bottom-start"
                :disabled="queryData.invoiceNumber.length <= 6"
              >
                <div class="custom_select_head">
                  <el-input type="text" v-model="queryData.invoiceNumber" placeholder="请输入" />
                </div>
              </el-tooltip>
            </div>
            <!-- 供应商 -->
            <div class="custom_item">
              <div class="item_title">供应商</div>
              <el-tooltip
                effect="dark"
                :content="getDictTextById(gysOptions, queryData.xghCompanyId, 'companyName')"
                :enterable="false"
                placement="bottom-start"
                :disabled="this.getHideToolTipById(gysOptions, queryData.xghCompanyId, 'companyName')"
              >
                <div class="custom_select_head">
                  <el-select
                    v-model="queryData.xghCompanyId"
                    style="width: 100%"
                    filterable
                    ref="gongyingshang"
                    @visible-change="(value) => handleFilterMethod('', 'companyName')"
                    :filter-method="(value) => handleFilterMethod(value, 'companyName')"
                  >
                    <el-option
                      v-for="item in gysOptions"
                      :key="item.id"
                      :label="item.companyName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                  <div class="custom_more">
                    <i class="el-icon-more" @click.stop="onShowSupplier"></i>
                  </div>
                </div>
              </el-tooltip>
            </div>
          </div>
          <div class="screen_right">
            <!-- 隐藏作废单据 -->
            <div class="custom_item" style="width: 100px; margin-right: 40px">
              <el-checkbox style="margin-left: 10px" v-model="invoiceStatusFlag" @change="changeType()"
                >隐藏作废发票</el-checkbox
              >
            </div>
            <!-- 列配置 -->
            <div class="custom_item" style="width: 50px; margin-right: 0">
              <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
            </div>
          </div>
        </div>
        <div class="table_content">
          <el-table
            ref="tableList"
            show-summary
            :summary-method="getSummaries"
            highlight-current-row
            :header-cell-style="{
              color: '#666666',
              textAlign: 'center',
              height: '30px',
              borderColor: '#dddddd',
            }"
            :cell-style="{ textAlign: 'center' }"
            :data="tableData.records"
            height="100%"
            style="width: 100%"
            @row-dblclick="onRowDblClick"
          >
            <el-table-column :resizable="false" label="序号" type="index" width="50"></el-table-column>
            <template v-for="(item, index) in columnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="index"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                v-if="item.zidingyiState"
                :prop="item.props"
                :sortable="item.sortable"
                min-width="120px"
                :width="item.props == 'xh' ? '50px' : item.cellWidth"
              >
              <template slot-scope="scope">
                  <span v-if="item.props == 'reconciliationFlag'">
                      <el-checkbox
                        v-model="scope.row.reconciliationFlag"
                        v-if="!['27', '28'].includes(scope.row.orderType)"
                        @change="billReconciliation(scope.row, scope.$index)"
                      ></el-checkbox>
                  </span>
                  
                  <span
                    v-else-if="item.props == 'invoicePrice' || item.props == 'price' || item.props == 'priceTaxTotal' || item.props == 'taxAmount' || item.props == 'settlementBalance'"
                    :style="{ color: (scope.row.reconciliationFlag || scope.row.orderStatus == '20') ? '#f5222d' : '#666' }"
                  >
                    {{
                    $formatMoney(scope.row[item.props]) }}
                  </span>
                  <span
                    v-else
                    :style="{ color: (scope.row.reconciliationFlag || scope.row.orderStatus == '20') ? '#f5222d' : '#666' }"
                  >
                    {{
                    scope.row[item.props] }}
                  </span>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
        <div class="table_pagination">
          <div class="pagination_div">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="pagesize"
              layout="jumper, prev, pager,next, sizes"
              :total="tableData.total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 列配置弹框 -->
    <CConfiguration
      ref="setColumnRef"
      :columnDataArr="columnData"
      :defaultColumnDataArr="defaultColumnData"
      orderType="进项发票管理"
      @onSaveColumn="onSaveColumn"
    ></CConfiguration>
    <!-- 选择往来单位弹框  -->
    <DialogSupplier ref="supplierRef" @onSelectSupplier="onSelectSupplier"></DialogSupplier>
    <!-- 新增往来单位弹框 -->
    <DialogSupplierAdd ref="supplierAddRef" @onAddSubmit="onAddSupplier"></DialogSupplierAdd>
    <!-- 打印 -->
    <dialog-print ref="print"></dialog-print>
  </div>
</template>
  
<script>
import CConfiguration from '@/components/c_column/columnConfiguration1'
import DialogSupplier from '../../components/dialogSupplier'
import DialogSupplierAdd from '../../components/dialogSupplierAdd'
/**打印 */
import dialogPrint from '@/views/components/dialogPrintRecord'
import { getAction, postAction, downPostFile } from '@/api/manage'
// 导入调用处理权限数据方法
import { handlePermissions, handleOtherPerms } from '@/utils/index'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { delcommafy, getLikeCompanyId } from '../../../utils'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'

export default {
  name: 'incomingManage',
  components: {
    CConfiguration,
    DialogSupplier,
    DialogSupplierAdd,
    dialogPrint,
  },
  mixins: [JeecgListMixin],
  computed: {
    //   权限设置   要更改
    buttonsPermissions() {
      return handlePermissions('进项发票管理')
    },
    printPermissions() {
      return handleOtherPerms('单据可多次打印')
    },
  },
  created() {
    this.getData()
  },
  watch: {},
  data() {
    return {
      userInfo: Vue.ls.get(USER_INFO),
      // 往来单位
      gysOptions: [],
      // 入货仓库
      ckOptions: [],
      // 经手人
      jsrOptions: [],
      // 单据状态:0.待审核5.审核通过10.作废15.反审20.红冲25.终止30.完成
      djztOptions: [
        {
          value: '1',
          label: '普通发票',
        },
        {
          value: '2',
          label: '增值税发票',
        },
      ],
      invoiceStatusFlag: false,
      // 查询条件数据
      orderNumberParam: '', // 单据编号/往来单位
      queryData: {
        type:0,
        invoiceStatus: '', //隐藏作废单据
        xghCompanyId: '', // 供应商id
        invoiceNumber: '', // 发票号码
        invoiceType: '', // 发票类型
        startDate: '', // 开始时间
        endDate: '', //结束时间
        reconciliationFlag: undefined
      },
      // 月份选择
      monthValue: '本月',
      monthOptions: [ '今天', '昨天', '本周', '上一周', '本月', '上一月', '本年', '去年'], //,'当前账期'
      isShowDate: true, // 是否显示选择时间组件
      nowDate: [],
      // 表格数据
      tableData: {},
      // 列配置数据
      defaultColumnData: [],
      // 列配置数据
      columnData: [
        {
          morenName: '发票日期',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
        //   sortable: true,
          props: 'invoiceTime',
        },
        {
          morenName: '发票号码',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'invoiceNumber',
        },
        {
          morenName: '发票类型',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'invoiceType_dictText',
        },
        {
          morenName: '供应商',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'xghCompanyId_dictText',
        },
        {
          morenName: '部门',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'departId_dictText',
        },
        {
          morenName: '经手人',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'sysUserId_dictText',
        },
        {
          morenName: '开票金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'invoicePrice',
        },
        {
          morenName: '不含税金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'price',
        },
        {
          morenName: '税额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'taxAmount',
        },
        {
          morenName: '价税合计',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'priceTaxTotal',
        },
        {
          morenName: '开票方式',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'invoiceWay_dictText',
        },
        {
          morenName: '对账标记',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'reconciliationFlag',
        },
        {
          morenName: '对账人',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'reconciliationBy_dictText',
        },
        {
          morenName: '对账日期',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'reconciliationDate',
        },
        {
          morenName: '备注',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'remark',
        },
      ],
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      updateId: '', // 修改列配置时返回的id
      url: {
        listUrl: '/xghInvoice/xghInvoice/list',
        api: '进项发票管理',
        exportXlsUrl: '/xghInvoice/xghInvoice/exportXls',
      },
    }
  },
  mounted() {},
  methods: {
    changeType(){
      this.queryData.invoiceStatus = this.invoiceStatusFlag ? 0 : ''
      this.queryClick()
    },
    // 打印
    async handleShortcutKeyPrint() {
      // 查询
      let params = {
        ...this.queryData,
        orderStatus: this.queryData.orderStatus == -1 ? undefined : this.queryData.orderStatus,
        // orderNumber: `*${this.queryData.orderNumber}*`,
        orderNumber: this.queryData.orderNumber,
        orderNumberParam: this.orderNumberParam,
        companyIdParam: getLikeCompanyId(this.gysOptions, this.orderNumberParam),
      }
      let data = {
        ...params,
        orderType: '27',
        pageSize: 1000000,
        pageNo: 1,
      }
      let printExclusive = []
      const res = await getAction(this.url.listUrl, data)
      if (res.code !== 200) {
        return this.$elMessage.error('获取数据失败！')
      }
      printExclusive = res.result.records || []
    //   printExclusive.forEach((item) => {
    //     console.log("item",item)

    //     item.createOrderDate = item.createOrderDate.substring(0, 10)
    //     // item.orderTime = item.orderTime.substring(0, 10)
    //     // item.doneTime = item.status == 1 ? item.arrivalTime : ''
    //   })
      this.queryClick()
      // 打印
    //   if (!this.buttonsPermissions.DaYin) {
    //     this.$elMessage.warning('未拥有打印权限！')
    //   } else 
      if (!printExclusive || printExclusive.length <= 0) {
        this.$elMessage.warning('没有要打印的记录！')
      } else {
        let printData = {
          riqi: this.queryData.startDate + '~' + this.queryData.endDate,
          wanglaidanwei: this.$refs.gongyingshang.selected.label,
          fapiaoleixing: this.$refs.fplxSelect.selected.label,
          fapiaohaoma: this.queryData.invoiceNumber,
        //   jingshouren: this.$refs.jingshouren.selected.label,
          printExclusive,
        }
        // 可以多次打印设置
        if (this.printPermissions) {
          this.$refs.print.show(printData, this.columnData, '进项发票管理')
        } else {
          if (this.$lcStorage.get('printLimitValue')) {
            // 获取打印次数
            this.getPrintNum('进项发票管理', () => {
              this.$refs.print.show(printData, this.columnData, '进项发票管理')
            })
          } else {
            this.$refs.print.show(printData, this.columnData, '进项发票管理')
          }
        }
      }
    },
    // 初始化获取数据
    getData() {
      this.getTimeRange(this.$setTimeRange(5)) // 默认获取当月时间
      this.getGysStorage() // 获取往来单位信息数据
      this.getStaffData() // 获取经手人信息数据
      this.selectTitle()
      this.queryClick()
    },
    // 初始化查询列配置值
    async selectTitle() {
      let obj = await this.$setColumn.selectColumn(this.url.api)
      console.log(obj)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.url.api, this.$options.data().columnData)
        this.updateId = id
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn(value) {
      this.columnData = value
      let res = await this.$setColumn.editColumn(this.url.api, this.columnData, this.updateId)
      if (res.code == 200) {
        this.$elMessage.success(res.message)
      } else {
        this.$elMessage.error(res.message)
      }
    },
    queryClick() {
      this.currentPage = 1
      this.getTableData()
    },
    // 获取表格信息数据
    async getTableData() {
      let data = {
        ...this.queryData,
        invoiceType: this.queryData.invoiceType == -1 ? undefined : this.queryData.invoiceType,
        invoiceNumber: this.queryData.invoiceNumber,
        pageSize: this.pagesize,
        pageNo: this.currentPage,
      }
      const res = await getAction(this.url.listUrl, data)
      if (res.code !== 200) {
        return this.$elMessage.error('获取数据失败！')
      }
      this.tableData = res.result
      this.tableData.records.forEach((item) => {
        item.invoiceTime = item.invoiceTime.substring(0, 10)
        item.reconciliationFlag = item.reconciliationFlag == '1' // 转换对账标记为布尔值
      })
    },
    // 获取往来单位数据列表
    getGysStorage() {
      getAction('/xghCompany/xghCompany/listNoPage', {}).then((res) => {
        if (res.code === 200) {
          this.gysOptions = res.result
          this.totalCompanys = res.result
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 获取经手人数据列表
    async getStaffData() {
      getAction('/dept/xghAccountBookDept/getAllDeptUsers', {}).then((res) => {
        if (res.code === 200) {
          this.jsrOptions = res.result
          this.totalPersons = res.result
        }
      })
    },
    // 新单 跳转至一半费用单新单页面
    toNewOrder() {
      this.$router.push({
        path: '/invoicesManage/invoicesStatistics/incomingInfo',
      })
    },
    // 导出
    exportExcel () {
      let fileName = '进项发票管理'
      let queryParam = {
        ...this.queryData,
        pageSize:this. pagesize, //每页的数据条数
        pageNo:this.currentPage, //默认开始页面
      }
      this.handleExportXlsByStaff(fileName, queryParam)
    },
    // 刷新
    onRefresh() {
      Object.assign(this.$data, this.$options.data())
      this.getData()
    },
    // 打开新增客户弹出框
    //   onShowSupplierAdd () {
    //     this.$refs.supplierAddRef.dialogVisible = true
    //   },
    // 新增客户数据
    onAddSupplier(res) {
      // 先清空新增客户时的数据
      // 把当前新增值的客户名称展示在输入框内,做数据存储
      this.onSelectSupplier(res)
      // 调用子组件的数据更新方法
      this.$refs.supplierRef.getData()
    },
    // 打开选择客户弹出框
    onShowSupplier() {
      this.$refs.supplierRef.dialogVisible = true
    },
    // 当前选择往来单位数据
    onSelectSupplier(val) {
      this.queryData.xghCompanyId = val.id
    },
    // 判断当前选择时间段
    changeDate(val) {
      switch (val) {
        case '今天':
          this.getTimeRange(this.$setTimeRange(1))
          break
        case '昨天':
          this.getTimeRange(this.$setTimeRange(2))
          break
        case '本周':
          this.getTimeRange(this.$setTimeRange(3))
          break
        case '上一周':
          this.getTimeRange(this.$setTimeRange(4))
          break
        case '本月':
          this.getTimeRange(this.$setTimeRange(5))
          break
        case '上一月':
          this.getTimeRange(this.$setTimeRange(6))
          break
        case '本年':
          this.getTimeRange(this.$setTimeRange(7))
          break
        case '去年':
          this.getTimeRange(this.$setTimeRange(8))
          break
        // case '当前账期':
        //     this.getTimeRange({
        //     now: '',
        //     end: '',
        //     })
        //     break
        default:
          break
      }
    },
    // 获取时间范围并设置
    getTimeRange(data) {
      this.nowDate = [data.now, data.end]
      this.queryData.startDate = data.now
      this.queryData.endDate = data.end
    },
    // 获取当前选中时间
    onClickPicker(val) {
      this.queryData.startDate = val[0]
      this.queryData.endDate = val[1]
    },
    // 触发列配置弹框
    onShowColumn() {
      this.defaultColumnData = this.$options.data().columnData
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 双击跳转
    onRowDblClick(row, column, event) {
      // console.log("**********",row, column, event)
      const index = this.tableData.records.indexOf(row);
                    console.log('双击行的索引是:', index);
      let that = this
      // this.$toBillDetail(this, row.orderType, row.id)
      const invoiceId = row.id
      const invoiceWay = row.invoiceWay
  if (invoiceId && invoiceId.length > 0) {
    that.$router.push({
      // name: '进项发票信息',
      name: 'invoicesManage-invoicesStatistics-incomingInfo',
      params: {
        invoiceId,
        invoiceWay,
        index,
      },
    })
  }
    },
    // 合计列计算
    getSummaries(param) {
      this.$nextTick(() => {
        this.$refs.tableList.doLayout()
      })
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.tableData.total + '条明细'
        } else if (['invoicePrice', 'price', 'taxAmount', 'priceTaxTotal'].includes(column.property)) {
          // 计算这4个字段的合计
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + value
              } else {
                return prev
              }
            }, 0)
            sums[index] = this.$formatMoney(sums[index])
          } else {
            sums[index] = ''
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 获取每页几条数据
    handleSizeChange(val) {
      this.pagesize = val
      this.getTableData()
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTableData()
    },
    // 历史记录数据去重并只展示三个数据方法
    //   selectDataHas (arr) {
    //     let map = new Map()
    //     for (const item of arr) {
    //       if (!map.has(item.id)) {
    //         map.set(item.id, item)
    //       }
    //     }
    //     let newArr = [...map.values()]
    //     return newArr.slice(0, 3)
    //   },
    // 搜索
    handleFilterMethod(value, label) {
      if (label == 'companyName') {
        this.gysOptions = this.filterMethod(this.gysOptions, value, label)
      } else if (label == 'realname') {
        this.jsrOptions = this.filterMethod(this.jsrOptions, value, label)
      }
    },
    // 对账标记
    billReconciliation(row, index) {
      let params = {
        invoiceId: row.id,
        reconciliationBy: this.userInfo.id,
        reconciliationFlag: row.reconciliationFlag ? '1' : '0'
      }
      getAction('/xghInvoice/xghInvoice/reconciliation', params).then(res => {
        if (res.success) {
          let result = res.result
          let item = this.tableData.records[index]
          item.reconciliationBy = result.reconciliationBy
          item.reconciliationBy_dictText = result.reconciliationBy_dictText
          item.reconciliationDate = result.reconciliationDate
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
  },
}
</script>
  
<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: calc(100vh - 102px);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

.info_operation_btn {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;

  .el-button {
    width: 70px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    margin-right: 6px;
  }

  .el-button--default {
    color: #666;
  }

  .btn_left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    p {
      font-size: 12px;
      color: #666;
      margin: 0 0.1rem 0 0.187512rem;
    }

    ::v-deep .el-checkbox {
      margin-right: 1px;

      .el-checkbox__label {
        font-size: 12px;
        padding-left: 0.1rem;
      }
    }

    ::v-deep .el-select {
      width: 70px;
      height: 40px;
      box-sizing: border-box;
      margin-right: 0.187512rem;

      .el-input {
        .el-input__inner {
          height: 40px;
          border: none;
          font-size: 12px;
        }

        .el-input__suffix {
          height: 40px;
          display: flex;
          align-items: center;
        }
      }
    }

    .selectSty {
      width: 2.625164rem;
    }
  }

  .btn_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-input {
      width: 250px;
      height: 30px;
      margin-right: 0.112507rem;

      ::v-deep .el-input__inner {
        height: 30px;
        border: none;
        box-sizing: border-box;
        padding: 0 0.15rem;
        background: #fff;
        font-size: 12px;
        color: #666;

        &::placeholder {
          font-size: 12px;
          color: #c1c1c1;
        }
      }
    }

    .set_up {
      font-size: 23px;
      color: rgb(153, 153, 153);
    }
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 60px);
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
  display: flex;

  .div_table {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    transition: all 0.3s;
    overflow: hidden;

    .div_screen {
      width: 100%;
      // height: 100px;
      margin-bottom: 10px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;

      .screen_center {
        font-size: 12px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        min-width: 600px;
      }
      .screen_right {
        font-size: 12px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        //   flex-wrap: wrap;
        //   min-width: 600px;
      }

      .screen_left {
        display: flex;
        align-items: center;

        .right_top {
          margin-right: 20px;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          box-sizing: border-box;
          // padding-top: 10px;

          ::v-deep .el-button {
            // width: 60px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            border-radius: 5px;
            border: none;
          }

          ::v-deep .el-select {
            width: 80px;
            margin: 0 10px;

            .el-input {
              .el-input__inner {
                height: 30px;
                border-color: #e3e3e3;
                font-size: 12px;
                padding-left: 5px;
              }

              .el-input__suffix {
                height: 30px;
                display: flex;
                align-items: center;
              }
            }
          }

          ::v-deep .el-date-editor {
            width: 220px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #d9d9d9;
            margin-right: 0.112507rem;
            padding: 3px 6px;

            .el-range__icon {
              position: absolute;
              right: 0;
              line-height: 30px;
            }

            .el-range-separator {
              line-height: 24px;
            }

            .el-range-input {
              font-size: 12px;
            }

            .el-range__close-icon {
              display: none;
            }
          }
        }
      }
    }

    .table_content {
      height: calc(100% - 150px);

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        border-bottom: none;
        box-sizing: border-box;
        height: 100%;

        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          .cell {
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
          }
        }

        th {
          .cell {
            background: #ededed;
            justify-content: center;
          }
        }

        .el-checkbox {
          .is-indeterminate {
            .el-checkbox__inner {
              color: #1b93f9;
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }
        }

        .el-icon-edit-outline {
          font-size: 0.25rem;
          color: #1b93f9;
          margin-right: 0.037502rem;
        }

        .el-icon-delete {
          font-size: 0.25rem;
          color: #ff2626;
          margin-left: 0.037502rem;
        }

        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 10px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }

    .table_pagination {
      .total {
        margin-top: 0.25rem;
        width: 3.750234rem;
        font-size: 12px;
        color: #666666;
      }

      width: 100%;
      height: 50px;
      box-sizing: border-box;
      padding: 10px 0;
      display: flex;

      .pagination_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        ::v-deep .el-pagination {
          padding: 0;
          height: 30px;

          .el-pagination__sizes {
            margin: 0;

            .el-input {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}

.custom_item {
  display: flex;
  align-items: center;
  margin: 10px 44px 10px 0;
  width: 180px;
  font-size: 12px;
}

.item_title {
  padding: 0 5px;
  width: auto;
  min-width: 60px;
  line-height: 30px;
  color: #666666;
  text-justify: distribute-all-lines;
  /*ie6-8*/
  text-align-last: justify;
  /* ie9*/
  -moz-text-align-last: justify;
  /*ff*/
  -webkit-text-align-last: justify;
  /*chrome 20+*/
}

.custom_select_head {
  flex: 1;
  height: 30px;
  position: relative;

  ::v-deep .el-select {
    .el-input {
      .el-input__inner {
        height: 30px;
        border-color: #e3e3e3;
        font-size: 12px;
        padding-left: 5px;
      }

      .el-input__suffix {
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
  }

  ::v-deep .el-input {
    width: 100%;

    .el-input__inner {
      height: 30px;
      border-color: #e3e3e3;
      font-size: 12px;
      padding-left: 5px;
    }

    .el-input__suffix {
      height: 30px;
      display: flex;
      align-items: center;
    }
  }
}

.custom_more {
  position: absolute;
  right: 10px;
  z-index: 10;
  top: 1px;
  background: #fff;
  height: 28px;
  display: flex;
  align-items: center;
  color: #bfbfbf;
}

.custom_add {
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    margin-left: 5px;
    color: #666666;
  }

  i {
    color: #666666;
  }
}

.disabled_button {
  background: #cbced3 !important;
  color: #666 !important;
}
</style>